<template>
  <div class="search">
    <Navi :title="'搜索'" :flexd="true" />

    <div class="bbox">
      <div class="btitle">搜索列表</div>

      <div class="blist">
        <div
          class="lbox"
          v-for="(item, index) in list1"
          :key="index"
          @click="viewAudio(item.id)"
        >
          <div class="limg">
            <img class="auto-img" :src="item.cover_path" alt="" />
          </div>
          <div class="ltext">{{ item.title }}</div>
          <div class="lxiang">
            <span class="jian">介绍:</span
            ><span class="jie">{{ item.custom_title }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
export default {
  name: "Search",
  components: {
    Navi,
  },
  data() {
    return {
      list1: [],
      val1: [],
    };
  },
  created() {
    this.$toast("加载成功");
    let k = 0;
    if (this.$route.params.val != undefined) {
      this.getsearch(this.$route.params.val);
      k++;
      let localData1 = localStorage.getItem(k + "Li");
      if (!localData1) {
        localData1 = [];
      } else {
        localData1 = JSON.parse(localData1);
        localData1.forEach((v) => {
          this.val1.push(v);
        });
      }
      let addList = {
        lishi: this.$route.params.val,
      };
      localData1.push(addList);
      localStorage.setItem(k + "Li", JSON.stringify(localData1));
    } else if (this.$route.params.val === undefined) {
      k++;
      let localData1 = localStorage.getItem(k + "Li");
      localData1 = JSON.parse(localData1);
      this.getsearch(localData1.pop().lishi);
    }
  },
  methods: {
    getsearch(val) {
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/ximalaya/search?kw=" +
          val +
          "&core=all&page=1&rows=20",
      })
        .then((result) => {
          if (!result) {
            this.$router.push({ name: "Home" });
          }
          this.$toast("加载成功");
          result.data.data.albumViews.albums.forEach((v) => {
            this.list1.push(v.albumInfo);
          });
        })
        .catch((err) => {});
    },
    viewAudio(trackid) {
      this.$router.push({ name: "Audio", params: { trackid } });
    },
  },
};
</script>

<style lang="less" scoped>
.bbox {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  .btitle {
    width: 100%;
    padding: 5px 0;
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    color: #333;
    border-bottom: 1px solid #ddd;
  }
  .blist {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 15px 10px;
    box-sizing: border-box;
    flex-wrap: wrap;
    .lbox {
      width: 49%;
      margin-bottom: 15px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 10px;
      .limg {
        width: 110px;
        height: 110px;
        margin: 0 auto;
      }
      .ltext {
        color: #333;
        font-size: 14px;
        margin: 5px 0;
        font-weight: bold;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
        white-space: nowrap;
      }
      .jian {
        color: #333;
        font-size: 13px;
      }
      .jie {
        color: #333;
        font-size: 12px;
        margin-top: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
  }
}
</style>